<template>
  <view class="follow-page">
    <!-- 头部导航 -->
    <view class="header">
      <text class="title">我的关注</text>
    </view>

    <!-- 关注列表容器 -->
    <view class="list-container">
      <!-- 关注项列表 -->
      <view class="follow-item" v-for="(item, index) in staticList" :key="index">
        <!-- 头像 -->
        <image :src="item.avatar" class="avatar"></image>
        <!-- 用户信息区 -->
        <view class="user-info">
          <text class="nickname">{{ item.nickname }}</text>
          <view class="verify-tag" v-if="item.verified">已实名</view>
        </view>
        <!-- 箭头图标 -->
        <view class="rule-link1"></view>
      </view>
    </view>
  </view>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 静态数据
    const staticList = ref([
      {
        avatar: 'https://picsum.photos/200/200?random=1',
        nickname: '昵称',
        verified: true
      },
      {
        avatar: 'https://picsum.photos/200/200?random=2',
        nickname: '昵称',
        verified: true
      },
      {
        avatar: 'https://picsum.photos/200/200?random=3',
        nickname: '昵称',
        verified: false
      }
    ]);

    return {
      staticList
    };
  }
};
</script>

<style scoped>
/* 页面基础样式 */
.follow-page {
  padding-top: 176rpx;
  background-color: #f7f8fa;
  min-height: 100vh;
  padding-top: var(--status-bar-height); /* 适配状态栏 */
}

/* 头部导航 */
.header {
  display: flex;
  justify-content:center;
  align-items: center;
  height: 176rpx; 
  padding: 0 30rpx;
}

.back {
  font-size: 40rpx;
  color: #333;
  line-height: 1; /* 确保点击区域垂直居中 */
}

.title {
  font-size: 36rpx;
  font-weight: 400;
  text-align: center;
  color: #333;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 30rpx; /* 图标间距 */
}

.dots {
  font-size: 28rpx;
  color: #333;
}

.eye {
  font-size: 28rpx;
  color: #333;
}

/* 列表容器 */
.list-container {
  padding: 5rpx;
  width: 95%;
  margin: 0 auto;
  background-color: #ffffff;
}

/* 关注项样式 */
.follow-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25rpx 30rpx;
  background-color: #ffffff;
  margin-bottom: 10rpx; /* 项之间的分隔 */
}

/* 头像样式 */
.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%; /* 圆形头像 */
  margin-right: 20rpx;
  background-color: #f1f1f1; /* 占位背景 */
}

/* 用户信息区 */
.user-info {
  flex: 1; /* 占满剩余空间 */
  display: flex;
  align-items: center;
  gap: 10rpx; /* 昵称与标签间距 */
}

.nickname {
  font-size: 32rpx;
  color: #333333;
  white-space: nowrap; /* 防止换行 */
  overflow: hidden;
  text-overflow: ellipsis; /* 文字溢出省略 */
}

/* 实名认证标签 */
.verify-tag {
  font-size: 22rpx;
  color: #00b42a; /* 绿色标签 */
  background-color: #f0f9f0;
  padding: 2rpx 10rpx;
  border-radius: 4rpx;
  display: inline-flex;
  align-items: center;
}

.verify-tag::before {
  content: '✓';
  font-size: 16rpx;
  margin-right: 5rpx;
}

/* 箭头图标 */
.rule-link1 {
  color: #D9DCE1;
  margin-left: 30rpx;
}
.rule-link1::after {
  content: ">";
  margin-left: 0;
}
</style>